<template>
    <div class="manage__page">

      <div class="manage__operate">
        <div>
          <el-button type="primary" plain @click="open_operate('add')">新增</el-button>
          <!-- <el-button plain @click="open_operate('update')">编辑</el-button>
          <el-button type="danger" plain @click="delete_getway">删除</el-button> -->
        </div>
      </div>

      <div class="table__data">
        <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        height="100%"
        @selection-change="handleSelectionChange"
    >
        <el-table-column type="selection"  width="55" />
        <el-table-column :align="'center'" show-overflow-tooltip :property="col.property" :label="col.label" v-for="col,index in table_column"></el-table-column>
      
        <el-table-column  :align="'center'" show-overflow-tooltip property="is_active" label="操作">
            <template #default="scope">
              <div class="table__oper">
                <div>
                  <el-button @click="click_active(scope.row, scope.$index)" :type="scope.row.is_active == 1?'danger':'default'">{{ scope.row.is_active == 1?'禁用':'启用' }}</el-button>
                </div>
                <div>
                  <el-button type="primary" @click="click_membership(scope.row)">套餐</el-button>
                </div>
              </div>

            </template>
          </el-table-column>
      </el-table>
      </div>

      <div class="bottom__page">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />  

      </div>

      <UserDialog
        @confirm="confirm"
        @cancel="cancel"
        :visible="isVisible"
        :title="dialog_title"
        :instance="update_instance"
      >
      </UserDialog>

      <UserMembershipDialog
        @cancel="() => memberIsVisible = false"
        :visible="memberIsVisible"
        title="用户会员"
        :instance="member_instance"
      ></UserMembershipDialog>

    </div>
</template>
           
<script setup>
    import { ref, onMounted } from "vue"
    import MessageBox from '@/utils/MessageBox';
    import UserDialog from './UserDialog.vue'
    import UserMembershipDialog from './UserMembershipDialog.vue'
    import { getUserList, createUser, editUserActive } from '@/api/manage.js'
    import { sha256 } from 'js-sha256'

    const table_column = ref([
        {'label': 'ID', 'property': 'id'},
        {'label': '用户名', 'property': 'username'},
        {'label': '邮箱', 'property': 'mail'},
        {'label': '注册时间', 'property': 'register_time'},
        
    ])

    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(0)
    const multipleSelection = ref([])
    const click_oprate = ref('update')

    const isVisible = ref(false)
    const dialog_title = ref('新增菜单')
    const update_instance = ref({})

    const memberIsVisible = ref(false)
    const member_instance = ref({})

    const tableData = ref([])

    // 打开套餐
    const click_membership = (data_row)=>{
      member_instance.value = data_row
      memberIsVisible.value = true

    }

    // 获取数据
    const getDataList = async () => {
      var req_data = {
        page: currentPage.value,
        page_size: pageSize.value
      }
      var res = await getUserList(req_data)
      // console.log(res)
      tableData.value = res.list
      total.value = res.total
    }

    const createData = async (data) => {
        createUser(data)
        MessageBox.success('新增成功！')
    }

    // 修改用户可用状态
    const click_active = async (row_data, index)=>{
      row_data.is_active = row_data.is_active == 1?0:1
      // console.log(index)
      var req_data = {
        id: row_data.id,
        data: {
          is_active: row_data.is_active
        }
      }
      var res = editUserActive(req_data)
      
      tableData.value[index] = row_data
      // getDataList()
    } 

    // 用户勾选数据
    function handleSelectionChange(val) {
        
        multipleSelection.value = val
        // console.log(multipleSelection.value)
    }

    // 改变页面大小
    function handleSizeChange(newSize){
      // console.log(newSize)
      pageSize.value = newSize
      getDataList()
    }

    // 改变页码
    function handleCurrentChange(newPage){
      // console.log(newPage)
      currentPage.value = newPage
      getDataList
    }

    // 操作数据按钮
    function open_operate(operate_type){
      click_oprate.value = operate_type
        if (operate_type == "update"){  
            if(multipleSelection.value.length != 1){
                MessageBox.warning('请选择一条数据')
                return
            }
            dialog_title.value = '修改用户'
        }else{
            dialog_title.value = '新增用户'
            update_instance.value = {}
        }

        isVisible.value = true
    }

    // 提交数据
    function confirm(value){
        if (click_oprate.value == 'update'){

        }else{
          
          value.password = sha256(value.password)
          createData(value)
        }

        getDataList()
    }

    // 关闭弹窗
    function cancel(){
        isVisible.value = false
    }

    onMounted(()=>{
      getDataList()
    })
    
</script>


<style scoped lang="scss">
.manage__page{
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #fff;
  .manage__operate{
    height: 45px;
    width: 100%;
    position: relative;
    
    div{
      position: absolute;
      right: 10px;
      top: 10px;
    }
  }

  .table__data{
    height: calc(100% - 95px);
    // border-top: 1px solid #ebeef5;
  }

  .bottom__page{
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;

        }
}

.table__oper{
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
</style>